/**
 * 水球图第一个
 * @author lijj
 */

import { FC, useEffect, useRef } from "react";
import * as echarts from 'echarts';
import 'echarts-liquidfill'
const LiquidFillNd:FC<
    {
        countData: string
    }
    > = ({
        countData
    }) => {
    const echartsBox = useRef<HTMLDivElement>(null);
    let echartsClass = useRef<echarts.ECharts>()
    useEffect(() => {
        const resizeListener = () => {
            echartsClass.current?.resize()
        }
        resizeListener()
        window.addEventListener('resize', resizeListener);

        return () => {
            window.removeEventListener('resize', resizeListener);
        }
    }, [])
    useEffect(() => {
        // 初始化echarts
        setTimeout(() => {
            if (echartsBox) {
                var echarts_box_html = document.getElementById('echarts_liquidNd')!;
                echartsClass.current = echarts.init(echarts_box_html);
                ; (async () => {
                    let data = Number(countData)/60
                    
                    var option:echarts.EChartsCoreOption = {
                        series: [{
                            type:'liquidFill',
                            data: [data,data+0.01],
                            color: ['#D0A84D', new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, // 渐变从上到下
                                [//F95508
                                    { offset: 0, color: '#FFF220' }, // 渐变起始颜色
                                    { offset: 0.96, color: '#F95508' } // 渐变结束颜色
                                ]
                            ),],
                            center: ['50%', '50%'],
                            radius: '85%',
                            amplitude: '5%',
                            waveLength: '80%',
                            phase: 'auto',
                            period: 'auto',
                            shape: 'roundRect',
                        
                            outline: {
                                show: false,
                            },

                            waveAnimation: true,
                            animationEasing: 'linear',
                            animationEasingUpdate: 'linear',
                            animationDuration: 2000,
                            animationDurationUpdate: 1000,
                        
                        
                            backgroundStyle: {
                                color: 'rgba(255,255,255,.1)'
                            },
                        
                            label: {
                                show: false
                            },
                        
                            emphasis: {
                                itemStyle: {
                                    opacity: 0.1
                                }
                            }
                        }]
                    };
                    option && echartsClass.current!.setOption(option);
                }
                )()
            }
        },10)
    }, [countData])
    return (
        <div id="echarts_liquidNd" style={{
            width: '50%', 
            height: '10rem',
            backgroundColor: 'rgba(255,255,255,0)',
        }} ref={echartsBox}></div>
    )
}

export default LiquidFillNd